<template>
  <div class="register">
    <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="goBack" />

    <van-form @submit="onSubmit">
      <van-field
        v-model="registerForm.username"
        name="username"
        label="用户名"
        required
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="registerForm.password"
        type="password"
        name="password"
        label="密码"
        required
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <van-field
        v-model="registerForm.email"
        center
        clearable
        label="邮箱"
        required
        :rules="[{ validator,required: true, message: '请填写邮箱' }]"
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            @click="sendCode"
            :disabled="isDisabled"
          >{{isDisabled ? num + '秒' : '发送验证码'}}</van-button>
        </template>
      </van-field>

      <van-field
        v-model="registerForm.phone"
        name="phone"
        label="电话"
        :rules="[{ required: true, message: '请填写电话' }]"
      />

      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="registerForm.sex" direction="horizontal">
            <van-radio name="男" value="男">男</van-radio>
            <van-radio name="女" value="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        v-model="registerForm.code"
        name="code"
        label="请填写验证码"
        required
        :rules="[{ required: true, message: '请填写验证码' }]"
      />

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import * as api from "@/request/api/register.js";
export default {
  data() {
    return {
      registerForm: {}, //注册表单对象
    //   pattern: /{10}@sina\.com/,//邮箱正则校验123charles@sina.com
      isDisabled: false, //是否禁用发送按钮
      num: 5 //倒计时时间
    };
  },
  methods: {
    async API_sendCode(email) {
      //发送验证码接口
      let result = {
        email //邮箱
      };
      return await api.sendCode(result);
    },
    async API_register(name,pwd,email,phone,code,sex){//注册接口
      let result = {
        name,
        pwd,
        email,
        phone,
        code,
        sex
      }
      return await api.register(result)
    },
    goBack() {
      this.$router.go(-1);
    },
    async sendCode() {
      //发送验证码
      this.isDisabled = true;

      let time = setInterval(() => {
        if (this.num > 0) {
          this.num--;
        } else {
          this.isDisabled = false;
          clearInterval(time);
        }
      }, 1000);

      let res = await this.API_sendCode(this.registerForm.email);
      if (res.data.code === 1000) {
        this.$toast.success("发送成功");
      } else {
        this.$toast.success("发送失败,请检查邮箱格式");
      }
    },
    async onSubmit() {
      //提交注册表单
      let {username,password,email,phone,sex,code} = this.registerForm
      let res = await this.API_register(username,password,email,phone,code,sex)
      console.log(res)
      if(res.data.code === 1000){
        this.$toast.success("注册成功");
        this.$router.push("/login")
      }else if(res.data.code === 1001){
        this.$toast.fail(res.data.data);
      }else{
        this.$toast.fail("注册失败");
      }
    },
    validator(val){//邮箱校验
        // let reg = igm
        return /.{10}@sina\.com/.test(val)
    }
  }
};
</script>

<style>
</style>
